@*
    物料产品管理页面
*@
@{
    ViewData["Title"] = "物料产品管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物料产品管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-form-item .layui-input-inline {
            width: 180px;
        }
        .layui-table-tool-temp {
            padding-right: 120px;
        }
        .layui-btn-container {
            margin-bottom: 10px;
        }
        .material-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border: 1px solid #eee;
            border-radius: 3px;
        }
        .image-upload {
            width: 100px;
            height: 100px;
            border: 1px dashed #ccc;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            position: relative;
        }
        .image-upload input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            left: 0;
            top: 0;
            cursor: pointer;
        }
        .upload-preview {
            width: 100px;
            height: 100px;
            object-fit: cover;
            display: none;
        }
        /* 添加树形控件样式 */
        .tree-panel {
            height: 100%;
            border-right: 1px solid #e6e6e6;
            background-color: #fff;
            padding: 15px;
        }
        .tree-title {
            font-size: 16px;
            font-weight: bold;
            padding: 10px 0;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: 10px;
        }
        .main-container {
            display: flex;
        }
        .tree-container {
            width: 220px;
            flex-shrink: 0;
        }
        .content-container {
            flex-grow: 1;
            padding-left: 15px;
        }
    </style>
</head>
<body>
    @Html.AntiForgeryToken()
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">物料产品管理</div>
            <div class="layui-card-body">
                <div class="main-container">
                    <!-- 左侧树形结构 -->
                    <div class="tree-container">
                        <div class="tree-panel">
                            <div class="tree-title">物料产品分类</div>
                            <div id="materialTypeTree"></div>
                        </div>
                    </div>
                    
                    <!-- 右侧内容区 -->
                    <div class="content-container">
                        <!-- 搜索栏 -->
                        <form class="layui-form" lay-filter="searchForm">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">关键词</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="keyword" placeholder="物料编码/名称" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">物料编码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="materielCode" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">物料名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="materielName" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                            <!-- 隐藏的类型筛选字段 -->
                            <input type="hidden" name="materielTypePid" id="materielTypePid">
                            <input type="hidden" name="materielTypeld" id="materielTypeld">
                        </form>

                        <!-- 表格工具栏 -->
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn layui-btn-sm" id="addBtn"><i class="layui-icon">&#xe654;</i> 新增</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="batchDeleteBtn"><i class="layui-icon">&#xe640;</i> 批量删除</button>
                        </div>

                        <!-- 数据表格 -->
                        <table id="materialTable" lay-filter="materialTable"></table>

                        <!-- 操作列模板 -->
                        <script type="text/html" id="operationTpl">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
                        </script>

                        <!-- 物料类型模板 -->
                        <script type="text/html" id="materielTypeTpl">
                            {{# if(d.materielTypePid == 0){ }}
                            <span class="layui-badge layui-bg-blue">物料</span>
                            {{# } else { }}
                            <span class="layui-badge layui-bg-green">产品</span>
                            {{# } }}
                        </script>

                        <!-- 启用状态模板 -->
                        <script type="text/html" id="isNoTpl">
                            {{# if(d.isNo == 1){ }}
                            <span class="layui-badge layui-bg-green">启用</span>
                            {{# } else { }}
                            <span class="layui-badge layui-bg-gray">禁用</span>
                            {{# } }}
                        </script>

                        <!-- 安全库存模板 -->
                        <script type="text/html" id="isSecureTpl">
                            {{# if(d.isSecure == 1){ }}
                            <span class="layui-badge layui-bg-orange">是</span>
                            {{# } else { }}
                            <span class="layui-badge layui-bg-gray">否</span>
                            {{# } }}
                        </script>

                        <!-- 图片模板 -->
                        <script type="text/html" id="imageTpl">
                            {{# if(d.materielUrl){ }}
                            <img src="{{ d.materielUrl }}" class="material-image" alt="{{ d.materielName }}" >
                            {{# } else { }}
                            <span>无图片</span>
                            {{# } }}
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'upload', 'tree'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var upload = layui.upload;
            var tree = layui.tree;
            var $ = layui.jquery;
            
            // 当前选中的类型ID
            var currentTypeId = null;
            var currentTypePid = null;
            
            // 加载物料类型树
            loadMaterialTypeTree();
            
            // 加载物料类型树数据
            function loadMaterialTypeTree() {
                $.ajax({
                    url: '/Material/GetMaterialTypeTree',
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            // 渲染树形组件
                            tree.render({
                                elem: '#materialTypeTree',
                                data: res.data,
                                showCheckbox: false,
                                showLine: true,
                                accordion: false,
                                onlyIconControl: false,
                                click: function(obj) {
                                    // 点击树节点时触发
                                    var data = obj.data;
                                    console.log("点击树节点:", data);
                                    
                                    if (data.parentId === -1) {
                                        // 点击顶级节点 (物料/产品)
                                        $('#materielTypePid').val(data.id);
                                        $('#materielTypeld').val('');
                                        currentTypePid = data.id;
                                        currentTypeId = null;
                                    } else {
                                        // 点击子节点 (具体分类)
                                        $('#materielTypePid').val(data.parentId);
                                        $('#materielTypeld').val(data.id);
                                        currentTypePid = data.parentId;
                                        currentTypeId = data.id;
                                    }
                                    
                                    // 重新加载表格
                                    tableIns.reload({
                                        where: form.val('searchForm'),
                                        page: { curr: 1 }
                                    });
                                }
                            });
                        } else {
                            layer.msg('获取物料类型树失败: ' + res.message);
                        }
                    },
                    error: function(xhr) {
                        console.error('获取物料类型树请求错误:', xhr);
                        layer.msg('服务器错误: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : xhr.statusText));
                    }
                });
            }

            // 初始化表格
            var tableIns = table.render({
                elem: '#materialTable',
                url: '/Material/GetMaterials',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'id', title: 'ID', width: 60, sort: true },
                    { field: 'materielCode', title: '物料编码', width: 120 },
                    { field: 'materielName', title: '物料名称', width: 150 },
                    { field: 'materielUrl', title: '图片', width: 120,heigh:120, templet: '#imageTpl' },
                    { field: 'specifications', title: '规格型号', width: 120 },
                    { field: 'unitsId', title: '单位', width: 80 },
                    { field: 'materielTypePid', title: '物料类型', width: 100, templet: '#materielTypeTpl' },
                    { field: 'materielTypeld', title: '所属分类', width: 100 },
                    { field: 'isNo', title: '是否启用', width: 100, templet: '#isNoTpl' },
                    { field: 'isSecure', title: '安全库存', width: 100, templet: '#isSecureTpl' },
                    { field: 'createTime', title: '创建时间', width: 160, sort: true },
                    { title: '操作', width: 120, toolbar: '#operationTpl', fixed: 'right' }
                ]],
                response: {
                    statusCode: 0
                },
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                }
            });

            // 监听搜索按钮
            form.on('submit(searchBtn)', function (data) {
                tableIns.reload({
                    where: data.field,
                    page: { curr: 1 }
                });
                return false;
            });

            // 监听表格工具条
            table.on('tool(materialTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    // 编辑
                    layer.open({
                        type: 2,
                        title: '编辑物料',
                        area: ['800px', '700px'],
                        content: '/Material/AddEdit?id=' + data.id
                    });
                } else if (obj.event === 'delete') {
                    // 删除
                    layer.confirm('确定删除该物料吗？', function (index) {
                        $.ajax({
                            url: '/Material/DeleteMaterial',
                            type: 'POST',
                            data: { 
                                id: data.id,
                                __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
                            },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg('删除成功');
                                    tableIns.reload();
                                } else {
                                    layer.msg('删除失败: ' + res.message);
                                }
                            },
                            error: function (xhr) {
                                console.error('删除请求错误:', xhr);
                                layer.msg('服务器错误: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : xhr.statusText));
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 新增按钮点击事件
            $('#addBtn').on('click', function () {
                layer.open({
                    type: 2,
                    title: '新增物料',
                    area: ['800px', '700px'],
                    content: '/Material/AddEdit'
                });
            });

            // 批量删除按钮点击事件
            $('#batchDeleteBtn').on('click', function () {
                var checkStatus = table.checkStatus('materialTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请选择要删除的数据');
                    return;
                }
                var ids = data.map(function (item) {
                    return item.id;
                });

                layer.confirm('确定删除所选的' + data.length + '条数据吗？', function (index) {
                    $.ajax({
                        url: '/Material/BatchDeleteMaterials',
                        type: 'POST',
                        data: { 
                            ids: ids,
                            __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
                        },
                        success: function (res) {
                            if (res.success) {
                                layer.msg('批量删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg('批量删除失败: ' + res.message);
                            }
                        },
                        error: function (xhr) {
                            console.error('批量删除请求错误:', xhr);
                            layer.msg('服务器错误: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : xhr.statusText));
                        }
                    });
                    layer.close(index);
                });
            });
        });
    </script>
</body>
</html> 